<template>
  <header class="unify-header">
    <a href="/welcome.html" class="logo">
      <h1 class="title">雅昌影像</h1>
    </a>
    <ul class="menu">
      <li class="item" v-for="item in menus">
        <a :href="item.link">{{item.label}}</a>
      </li>
    </ul>
    <label class="theme-title">主题产品</label>
    <ul class="theme-list">
      <li class="item" v-for="product in products">
        <a :href="product.link">
          <div class="products-icon" :class="product.iconClass"></div>
          <span class="products-title">{{product.title}}</span>
        </a>
      </li>
    </ul>
    <div class="user-plan" v-if="isLogin">
      <div class="user-info">
        <img :src="userInfo.avatar" class="avatar">
        <span class="nickname">{{userInfo.userName}}</span>
        <div style="top: 66px;" class="user-menu">
          <ul>
            <li class="item" v-for="item in userMenu">
              <a :href="item.link">{{item.label}}</a>
            </li>
            <li class="item">
              <a href="javascript:void(0);" @click="exit">退出登录</a>
            </li>
          </ul>
        </div>
      </div>
      <a href="/user/cart" class="shopping-cart">
        <img src="./images/cart_user.png" class="icon-gouwuche"/>
        <em class="shopping-count" v-show="carCount">{{carCount}}</em>
        <label>购物车</label>
      </a>
    </div>
    <ul class="login-sign-in" v-if="!isLogin">
      <li class="item login">
        <a href="/user/login/login">登录</a>
      </li>
      <li class="item signin">
        <a href="/user/register/register">注册</a>
      </li>
    </ul>
    <a class="old-url" href="//www.artup.com">切换到旧版本</a>
  </header>
</template>

<script type="text/ecmascript-6">
  import Api from '@/api.js'

  export default {
    name: 'nav-hander',
    data: function () {
      return {
        menus: [{
          label: '首页',
          link: '/welcome.html'
        }, {
          label: '画册',
          link: '/print/album.html'
        }, {
          label: '磁贴画',
          link: '/print/magnetic.html'
        }, {
          label: '框画',
          link: '/print/frame.html'
        }, {
          label: '艺术合集',
          link: '/print/set.html'
        }, {
          label: '海报',
          link: '/print/poster.html'
        }],
        products: [{
          title: '方画册',
          iconClass: 'products-01',
          link: '/print/square.html'
        }, {
          title: '拾光集',
          iconClass: 'products-02',
          link: '/print/memory.html'
        }, {
          title: '小时光',
          iconClass: 'products-03',
          link: '/print/babytime.html'
        }, {
          title: '家.书',
          iconClass: 'products-04',
          link: '/print/family.html'
        }, {
          title: '台历',
          iconClass: 'products-05',
          link: '/print/deskdiary.html'
        }, {
          title: '挂历',
          iconClass: 'products-06',
          link: '/print/calendars.html?category=guali&defDbId=d86b43b8-b496-11e7-ab6d-c88d8360f6c1'
        }],
        userMenu: [{
          label: '个人中心',
          link: '/center/works.html'
        }, {
          label: '订单管理',
          link: '/center/order.html'
        }, {
          label: '我的作品',
          link: '/center/works.html'
        }, {
          label: '我的草稿箱',
          link: '/center/draft.html'
        }, {
          label: '我的素材',
          link: '/center/material.html'
        }, {
          label: '礼品卡管理',
          link: '/center/gifts.html'
        }, {
          label: '优惠券管理',
          link: '/center/coupons.html'
        }],
        carCount: 0,
        userInfo: null,
        isLogin: false
      }
    },
    methods: {
      getCarCount: function () {
        let _self = this
        Api.car.CarCount({}).then(res => {
          console.log(res)
          if (res.status === 200) {
            let count = res.data.totalRecord - 0
            if (!isNaN(count)) {
              _self.carCount = count > 99 ? '...' : count
            }
          }
        })
      },
      exit: function () {
        localStorage.clear()
        window.location.href = "/user/login/login"
      }
    },
    created: function () {
      this.isLogin = this.getLoginState()
      if (this.isLogin) {
        this.getCarCount()
      }
    }
  }
</script>

<style lang="scss" type="text/scss" rel="stylesheet/sass">

  .unify-header {
    display: block;
    height: 66px;
    line-height: 66px;
    text-align: center;
    font-size: 0;
    background: #000;
    font-family: "Microsoft YaHei";
    .logo {
      display: inline-block;
      padding-top: 14px;
      vertical-align: top;
      outline: 0;
      .title {
        width: 87px;
        height: 37px;
        text-indent: -9999px;
        background: url('./images/logo.png') no-repeat 100% 100%;
      }
    }
    .menu {
      display: inline-block;
      margin-left: 20px;
      overflow: hidden;
      vertical-align: top;
      .item {
        float: left;
        margin-left: 20px;
        line-height: 66px;
        a {
          font-size: 16px;
          outline: 0;
          color: #fff;
          vertical-align: bottom;
          &:hover {
            color: #bbb;
          }
        }
      }
    }
    .theme-title {
      display: inline-block;
      margin: 0 40px 0 20px;
      vertical-align: top;
      font-size: 16px;
      line-height: 66px;
      color: #fff;
      &:after {
        display: inline-block;
        margin-left: 6px;
        content: '';
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #9fa0a0;
        vertical-align: unset;
        transform: rotate(180deg);
      }
      &:hover {
        &:after {
          transform: rotate(0);
          transition: all .3s;
        }
        & + .theme-list {
          display: inline-block;
        }
      }
    }
    .theme-list {
      display: none;
      position: absolute;
      z-index: 200;
      top: 66px;
      right: 0;
      left: 0;
      font-size: 0;
      text-align: center;
      background: #f1efee;
      .item {
        display: inline-block;
        padding: 28px 0 20px;
        margin: 0 26px;
        transition: top 1.3s;
        &:hover {
          position: relative;
          top: -2px;
        }
        a {
          display: block;
          outline: 0;
        }
        .products-icon {
          width: 88px;
          height: 72px;
          background-repeat: no-repeat;
          background-position: 50% 50%;
          background-size: cover;
          &.products-01 {
            background-image: url("./images/products-01.png");
          }
          &.products-02 {
            width: 76px;
            height: 71px;
            background-image: url("./images/products-02.png");
          }
          &.products-03 {
            width: 68px;
            height: 71px;
            background-image: url("./images/products-03.png");
          }
          &.products-04 {
            width: 74px;
            height: 72px;
            background-image: url("./images/products-04.png");
          }
          &.products-05 {
            width: 77px;
            height: 70px;
            background-image: url("./images/products-05.png");
          }
          &.products-06 {
            width: 62px;
            height: 72px;
            background-image: url("./images/products-06.png");
          }
        }
        .products-title {
          display: block;
          text-align: center;
          margin-top: 14px;
          font-size: 12px;
          line-height: 1;
          color: #000;
        }
      }
      &:hover {
        display: inline-block;
      }
    }
    .login-sign-in {
      display: inline-block;
      font-size: 0;
      vertical-align: top;
      .item {
        a {
          color: #b5b5b6;
          font-size: 14px;
          outline: 0;
          line-height: 66px;
        }
        display: inline-block;
        &.login:after {
          content: '|';
          margin: 0 14px;
          font-size: 12px;
          color: #b5b6b6;
        }
      }
    }
    .user-plan {
      display: inline-block;
      vertical-align: top;
      .user-info {
        display: inline-block;
        cursor: pointer;
        &:hover {
          .user-menu {
            display: block;
          }
          .nickname:after {
            transform: rotate(180deg);
            transition: all 0.5s;
          }
        }
        .avatar {
          display: inline-block;
          width: 32px;
          height: 32px;
          margin-top: 16px;
          border-radius: 50%;
        }
        .nickname {
          display: inline-block;
          margin: 20px 0 0 10px;
          color: #fff;
          font-size: 16px;
          line-height: 26px;
          vertical-align: top;
          &:after {
            content: '';
            display: inline-block;
            margin-left: 4px;
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid #9fa0a0;
            vertical-align: unset;
          }
        }
        .user-menu {
          position: absolute;
          display: none;
          margin-left: 0;
          background: rgba(0, 0, 0, .5);
          width: 178px;
          z-index: 100;
          .item {
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #9fa0a0;
            text-align: center;
            a {
              font-size: 16px;
              line-height: 40px;
              color: #fff;
              display: block;
              width: 100%;
              height: 100%;
              transition: text-indent 0.3s;
              outline: 0;
              letter-spacing: 1px;
              &:hover {
                color: #a00000;
                text-indent: 10px;
              }
            }
          }
          &:hover {
            display: block;
          }
        }
        .user-menu .item:last-of-type {
          border-bottom: none;
        }
      }
      .shopping-cart {
        position: relative;
        display: inline-block;
        margin-left: 30px;
        padding-left: 36px;
        color: #fff;
        vertical-align: top;
        outline: 0;
        .icon-gouwuche {
          position: absolute;
          top: 22px;
          left: 0;
          font-size: 30px;
          line-height: 26px;
        }
        .shopping-count {
          position: absolute;
          top: 10px;
          left: 19px;
          display: block;
          width: 18px;
          line-height: 18px;
          font-weight: 200;
          font-size: 12px;
          font-style: normal;
          text-align: center;
          background: #a00912;
          border-radius: 50%;
        }
        label {
          display: inline-block;
          margin-left: 6px;
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          line-height: 66px;
          vertical-align: bottom;
          outline: 0;
        }
      }
    }
    .old-url {
      margin-left: 20px;
      font-size: 16px;
      color: #999;
      line-height: 66px;
    }
  }
</style>
